<template>
	<div>
	<!-- <div class="ele-body">
		<div class="ele-bg-white padding-15">
			<a-space size="middle" class="analysis-tabs-extra">
				<a-radio-group v-model:value="checked" @change="toggleChange">
					<a-radio-button value="sku_info">基本信息</a-radio-button>
					<a-radio-button value="main_stone">主石信息</a-radio-button>
					<a-radio-button value="vice_stone">副石信息</a-radio-button>
				</a-radio-group>
			</a-space>
			<zbTable ref="tableRef" :type="checked" :api-fun="get_list"> </zbTable>
		</div>	
	</div> -->
		<div class="flex">
			<div class="tit_wrap" style="flex-shrink:0">
				<div class="flex align-center">
					<div class="flex1 top_tit_item active">单据模块</div>
				</div>
	
				<div class="tit_item" :class="{ active: current == index }" v-for="(item, index) in options"
					:key="index" @click="toggle(item, index)">{{ item.label }}</div>
			</div>
			<div class="flex1">
				<div style="padding: 0 15px 15px 15px">
					<div class="flex align-center right_wrap">
						<div class="tit_item" :class="{ active: rightCurrent == index }"
							@click="toggleChange(item, index)" v-for="(item, index) in rightOptions"
							:key="index">{{ item.label }}</div>
					</div>
					<zbTable ref="tableRef" :info="info" :api-fun="get_list"> </zbTable>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Form, message } from 'ant-design-vue';
import {PlusOutlined,UploadOutlined,ClearOutlined,RestOutlined} from '@ant-design/icons-vue';
import zbTable from './components/huopinIndex.vue';
import { get_list } from '@/api/material/column_rule';

const tableRef = ref(null);
const checked = ref('sku_info');
const current = ref(0);
const rightCurrent = ref(0);
const options = ref([{
		label: '首饰采购',
		value: 1
	},
	{
		label: '饰品采购',
		value: 2
	},
	{
		label: '赠品采购',
		value: 4
	}
]);
const rightOptions = ref([{
		label: '基本信息',
		value: 'sku_info'
	},
	{
		label: '主石信息',
		value: 'main_stone'
	},
	{
		label: '副石信息',
		value: 'vice_stone'
	}
]);
const info = reactive({
		goods_type:options.value[0].value,
		type:'sku_info'
	});
	
const toggle = (item, index) => {
	current.value = index;
	info.goods_type = item.value;
	tableRef.value.changeType(info);
};

const toggleChange = (item, index) => {
	rightCurrent.value = index;
	info.type = item.value;
	tableRef.value.changeType(info);
};

</script>

<style lang="less" scoped>
.text_wrap {
	display: inline-block;
	min-width: 100px;
}
.right_wrap{
	background-color: #ffffff;
	padding-bottom:15px;
}
</style>
